<!-- 底部按钮组件 -->
<template>
	<u-popup :round="15" :show="show" @close="$emit('close')" @open="$emit('open')">
		<view class="box">
			<view class="top">
				<view class="ico" @click="$emit('close')">×</view>
				<view class="title">请选择话题</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index" @click="$emit('selected', item)">#{{ item.title }}#</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { hotTopic } from '@/apis/apis.js';
export default {
	props: {
		show: Boolean,
		list: Array
	},

	data() {
		return {};
	},
	mounted() {},
	methods: {}
};
</script>

<style scoped lang="scss">
.box {
	height: calc(100vh - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	.top {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.ico {
			position: absolute;
			left: 6%;
			top: 50%;
			transform: translateY(-50%);
			font-size: 50rpx;
			font-weight: bold;
		}
		.title {
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.list {
		flex: 1;
		padding: 0 30rpx;
		overflow-y: scroll;
		.item {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #e9e9e9;
			font-size: 30rpx;
			color: #363636;
		}
	}
}
</style>
